// !要执行这个js文件，需要使用node，因为require、exports这些是node的方法  
// ?因为是node环境下的语法，所以不能用普通js文件的执行方法，要在控制台，输入   node js文件名称  进行执行  
// ?如果用普通js运行的方法（如：放在html中运行），则会报错，找不到require，因为require是node中的语法。
let fs = require("fs"); //需要用到的node方法    

//!getAllFileArr方法===》递归获取文件列表
/*
!之所以返回数组格式，是因为在getEntyry方法中要用到 file_list.forEach((item)=>{})，只有数组能用forEach
!循环里的每个item就是对应的每一行 所以item[0]==>表示a.js  item[1]==>表示./src/scripts/   item[2]==>表示./src/scripts/a.js
!最后返回的数据格式如下:
[ 
    [ 'a.js', './src/scripts/', './src/scripts/a.js' ],
    [ 'b.html', './src/scripts/', './src/scripts/b.html' ],
    [ 'c.css', './src/scripts/', './src/scripts/c.css' ] 
]
*/
function getAllFileArr(path) {
  let AllFileList = [];
  getAllFile(path)
  function getAllFile(path) {
    var files = [];
    if (fs.existsSync(path)) {   //是否存在此路径
      files = fs.readdirSync(path); //获取当前目录下一层文件列表
      files.forEach((file, index) => { //遍历获取文件
        var curPath = path + "/" + file;
        if (fs.statSync(curPath).isDirectory()) { // recurse 查看文件是否是文件夹
          getAllFile(curPath); //如果是文件夹，继续遍历获取
        } else {
          if (file !== '.DS_Store') {
            //.DS_Store是IDE配置文件不用计入到文件列表
            AllFileList.push([file, path, curPath])
          }
        }
      });
    }
  };
  return AllFileList;
}
//?=========================对外吐出该方法，供其他文件使用=========================
exports.getAllFileArr = getAllFileArr;

/**
 * ! 使用方法样例:
 * 遍历后返回的html名称数组,每个都进行 module.exports.plugins 的push操作 module.exports.plugins就是放这个的地方
 */
//?=========================这段代码放在webpack.config.js文件中,因为要用到 module.exports.plugins.push =========================
// const html_list = getAllFileArr('./src/html');
// console.log(html_list)
// html_list.forEach((item) => {
//   var name = item[2];
//   if (/\.html$/.test(item[0])) {  ///\.html$/.test(item[0])==>表示比对item[0]的尾缀是否为.html,是才进行下一步
//     var prex = 'html/' //文件前缀，如果想给打包的html放在build下的html文件夹中，则var prex='html/'
//     module.exports.plugins.push( //每个文件分别配置插件
//       new HtmlWebpackPlugin({
//         filename: prex + item[0],
//         template: name, //html模板路径
//         inject: true, //js插入的位置，true/'head'/'body'/false  设置为false，则不会自动引入打包后的js或者css文件
//         hash: true, //为静态资源生成hash值
//         // slice(0, -5)==> .html 正好5位,  slice(0, -5)表示返回到.html之前的名称 如:test.html==>返回test
//         // chunks: [item[0].slice(0, -5), 'common'],//需要引入的chunk，需要 js入口文件 名称和html的名称一致
//         chunks: ['baseJs'], //公共chunks
//         minify: {
//           collapseWhitespace: true,// 清除HTML中所有空格
//           removeComments: true,// 清除所有注释
//           //!是否压缩html内联css（使用clean-css进行的压缩） 默认值false
//           minifyCSS: true,
//           //!是否压缩html里的js（使用uglify-js进行的压缩） 默认值false
//           minifyJS: true,
//         }
//       })
//     )
//   }
// })
//?=========================这段代码放在webpack.config.js文件中,因为要用到 module.exports.plugins.push =========================






//! getEntry方法 ==》用于设置打包时的入口文件 webpack中的格式如下：
/**
 * entry: {
    baseJs: './src/js/common.js',// 页面1
    test: './src/index.js'
   }
 */
//!这个方法返回如下数据结构
/*
  {
      a: './src/scripts/a.js',
      b: './src/scripts/b.js',
      c: './src/scripts/c.js',
      'b.min': './src/scripts/b.min.js',   //之所以会'b.min' 有引号，是因为这是在对象中{}，所以key是多种符号的字符串时，会用''包起来
      'b-min': './src/scripts/b-min.js'
  }
*/

function getEntry(path) {
  let file_list = getAllFileArr(path);  //调用getAllFileArr方法===》递归获取文件列表
  let entry = {};
  file_list.forEach((item) => {
    /**
     * split('.')==》以 . 为分割符,将字符串分割为数组，如：test.js==》将被分割为['test','js']  test.min.js==》将被分割为['test','min','js']
     * slice(0, -1)==》返回指定范围数组，通过[0,-1） 返沪数组除最后一位的前面部分，如：['test','min','js']==》将返回['test','min']
     * join('.')==》 将数组中的数据通过 . 重新拼接起来，成为字符串 如：['test','min']==》拼接为 test.js 字符串
     * ! item[2]==>getAllFileArr方法中的数据格式是数组，所以item[2]就是最后一位，也就是文件的路径地址
     */
    entry[item[0].split('.').slice(0, -1).join('.')] = item[2] //键名去掉文件后缀
  })
  return entry;
}
//?=========================对外吐出该方法，供其他文件使用=========================
exports.getEntry = getEntry;

/**
 * !调用方法样例
 */
// const entryObj = getEntry('./src/res/static/js')
// console.log(entryObj)
// !然后在webpack打包代码中的entry处设置为获取到的处理后的entryObj即可
/**
 * module.exports = {
      entry:entryObj
   }
 */



//?=========================这段代码要放在 需要用到这个循环获取文件名功能的文件中 只有引入webpack.util.js才能调用它暴露的接口函数=========================

//!引入自己写的webpack.util.js文件,里面有写好的文件名获取方法
//!通过utils.进行调用js文件中暴露的方法
// const utils = require('./webpack.util.js')

/**
 *通过utils. 对暴露出来的接口进行调用
  entry: utils.getEntry('./src/script') //使用getentry方法获取多入口

  通过 utils.getAllFileArr('./src')  通过utils. 对暴露出来的接口进行调用
  var html_list = utils.getAllFileArr('./src');
 */
//?=========================这段代码要放在 需要用到这个循环获取文件名功能的文件中 只有引入webpack.util.js才能调用它暴露的接口函数=========================
